<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <c-select
          v-model="params['update_approval_type.eq']"
          clearable
          @change="getData()"
          :options="enumUpdateApprovalType"
          placeholder="异常类型"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['update_approval_status.eq']"
          clearable
          @change="getData()"
          :options="enumUpdateApprovalStatus"
          placeholder="状态"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      v-loading="loading"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <prelim-list-project :visible.sync="projectVisible" :table-id="tableId"></prelim-list-project>
  </div>
</template>

<script>
import { enumUpdateApprovalType, enumUpdateApprovalStatus } from '@/bank/plugins/enum'
import PrelimListProject from '@/bank/views/hnd/PrelimListProject'
export default {
  components: {
    PrelimListProject,
  },
  data() {
    return {
      enumUpdateApprovalStatus,
      enumUpdateApprovalType,
      order: {
        create_time: 'desa',
      },
      params: {
        index: 1,
        size: 10,
      },
      tableName: 'update_approval_batch',
      loading: false,
      tableData: [],
      tableCount: 0,
      tableColumns: [
        {
          attrs: { label: '申报时间', prop: 'create_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        {
          attrs: { label: '异常处理类型', prop: 'update_approval_type', align: 'center' },
          process: v => enumUpdateApprovalType[v],
        },
        { attrs: { label: '项目数量', prop: 'project_count', align: 'center' } },
        {
          attrs: { label: '状态', prop: 'update_approval_status', align: 'center' },
          process: v => enumUpdateApprovalStatus[v],
        },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [{ content: '详情', icon: 'fa fa-search', event: this.handleView }],
        },
      ],
      projectVisible: false,
      tableId: '',
    }
  },

  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = data.data || []
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.projectVisible = true
      this.tableId = row.update_approval_batch_id
    },
  },
}
</script>
<style lang="scss" scoped></style>
